<template>
  <FormItem :label="label" :prop="prop" :icon="icon" :single="single">
    <DateRangePicker :readonly="readonly" :disabled="disabled" :type="type" :model-value="modelValue" :format="format"
      @change="change"></DateRangePicker>
  </FormItem>
</template>
<script>

export default {
  name: "FormDateRange",
  props: {
    label: "",
    prop: "",
    type: {
      default: "text"
    },
    single: {
      default: false
    },
    icon: {
      default: ""
    },
    readonly: {
      default: false
    },
    disabled: {
      default: false
    },
    modelValue: {},
    isJoin: {
      default: false
    },
    format: {
      default: "YYYY-MM-DD"
    },
    type: {
      default: "date"
    }
  },
  computed: {
    see() {
      return this.$store.forms.see;
    }
  },
  methods: {
    change(data) {
      console.log(data)
      if (this.isJoin) {
        if (!!data.start) {
          data.start = data.start + " 00:00:00";
        }
        if (!!data.end) {
          data.end = data.end + " 23:59:59";
        }
      }
      this.$emit("update:modelValue", data);
    }
  }
};
</script>